<template>
  <view class="p-[32rpx] bg-gray-50 min-h-screen">
    <view class="mb-[32rpx]">
      <text class="block text-[32rpx] font-bold mb-[16rpx]">组件测试页面</text>
      <text class="block text-[24rpx] text-gray-500 mb-[16rpx]">测试 ItemWithImagesCard 是否正常显示</text>
    </view>

    <!-- 测试1：最简单的组件 -->
    <view class="mb-[48rpx]">
      <text class="block text-[28rpx] font-bold mb-[16rpx] text-gray-700">测试1：最简单版本</text>
      <ItemWithImagesCard
        :model-value="testItem1"
        @update:model-value="testItem1 = $event"
      />
    </view>

    <!-- 测试2：无标题版本 -->
    <view class="mb-[48rpx]">
      <text class="block text-[28rpx] font-bold mb-[16rpx] text-gray-700">测试2：无标题版本</text>
      <ItemWithImagesCard
        :model-value="testItem2"
        @update:model-value="testItem2 = $event"
        :show-title="false"
        description-label="测试输入"
        description-placeholder="请输入测试内容"
      />
    </view>

    <!-- 测试3：无图片版本 -->
    <view class="mb-[48rpx]">
      <text class="block text-[28rpx] font-bold mb-[16rpx] text-gray-700">测试3：无图片版本</text>
      <ItemWithImagesCard
        :model-value="testItem3"
        @update:model-value="testItem3 = $event"
        :show-images="false"
      />
    </view>

    <!-- 显示数据 -->
    <view class="bg-white p-[24rpx] rounded-[16rpx]">
      <text class="block text-[24rpx] font-bold mb-[16rpx]">当前数据：</text>
      <view class="bg-gray-50 p-[16rpx] rounded-[8rpx]">
        <text class="text-[20rpx] font-mono">{{ JSON.stringify({ testItem1, testItem2, testItem3 }, null, 2) }}</text>
      </view>
    </view>

    <!-- 返回按钮 -->
    <view class="mt-[48rpx]">
      <nut-button type="primary" block @click="goBack">返回</nut-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Taro from '@tarojs/taro'
import ItemWithImagesCard from '@/components/ItemWithImagesCard.vue'

const testItem1 = ref({
  title: '测试标题1',
  description: '测试描述1',
  images: []
})

const testItem2 = ref({
  title: '',
  description: '测试描述2（无标题）',
  images: []
})

const testItem3 = ref({
  title: '测试标题3',
  description: '测试描述3（无图片）',
  images: []
})

const goBack = () => {
  Taro.navigateBack()
}
</script>

